export class LoadingAnimation {
  static instance = null;
  #target = 'body';
  #element = null;

  constructor(target) {
    if (!LoadingAnimation.instance) {
      LoadingAnimation.instance = this;
    }
    this.target = target || this.target;
    return LoadingAnimation.instance;
  }

  #create() {
    const loading = document.createElement('div');
    loading.classList.add('loading');
    loading.innerHTML = `
      <div class="loading-spinner">
        <div class="loading-spinner-inner">
          <svg focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg>
        </div>
        <div class="loading-spinner-text">Loading...</div>
      </div>
    `;
    return loading;
  }

  start() {
    if (this.#element !== null) {
      return this;
    }
    this.#element = this.#create();
    const dom = document.querySelector(this.#target);
    dom.appendChild(this.#element);
    return this;
  }

  done() {
    if (this.#element === null) {
      return this;
    }

    setTimeout(() => {
      const dom = document.querySelector(this.#target);
      dom.removeChild(this.#element);
      this.#element = null;
    }, 500);
    return this;
  }
}
